<template>
  <div class="cont-event">
    <!-- <div class="header">
      <div class="title">预警信息</div>
      <div class="close" @click="emit('close')"></div>
    </div> -->
    <div class="close" @click="emit('close')"></div>
    <div class="content">
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in state.data"
          :key="index"
          @click="showWarningDetail(item)"
        >
          <div class="inft">
            {{ item.eventTypeName }}
          </div>
          <!-- <div class="infc">{{ item.objectTag }} | {{ item.happenTime }}</div>
          <div class="line" v-if="index != state.data.length - 1"></div> -->
          <div class="infc">{{ item.reportTime }}</div>
          <div class="infoa" :title="item.deviceName">
            {{ item.deviceName }}
          </div>
          <img class="img" :src="item.pic" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oneData: Object,
  warningItem: Object,
});
const emit = defineEmits(["close", "showDetail"]);
const state = reactive({
  show: true,
  data: [
    // {
    //   eventTypeName: "乱倒垃圾",
    //   reportTime: "2024-22-22 10:10:10",
    //   deviceName:
    //     "党的十八大以来，以习近平同志为核心的党中央始终关心关怀着中关村的发展",
    // },
    
    // {
    //   eventDesc: "乱倒垃圾",
    //   happenTime: "2024-22-22 10:10:10",
    //   happenAddress:
    //     "党的十八大以来，以习近平同志为核心的党中央始终关心关怀着中关村的发展",
    // },
    // {
    //   eventDesc: "乱倒垃圾",
    //   happenTime: "2024-22-22 10:10:10",
    //   happenAddress:
    //     "党的十八大以来，以习近平同志为核心的党中央始终关心关怀着中关村的发展",
    // },
    // {
    //   eventDesc: "乱倒垃圾",
    //   happenTime: "2024-22-22 10:10:10",
    //   happenAddress:
    //     "党的十八大以来，以习近平同志为核心的党中央始终关心关怀着中关村的发展",
    // },
  ],
});
const getAlarm = () => {
  useApi.post("/dynamicview/eventcenter/gettodaylist", {}).then((res) => {
    state.data = res.data.eventList;
  });
};

const showWarningDetail = (item) => {
  console.log("showWarningDetail", item);
  emit("showDetail", item);
};

watch(
  () => props.warningItem,
  (newval) => {
    // state.data.push(newval);
    state.data = [newval];
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {
  // getAlarm();
});
</script>


<style lang="scss" scoped>
.cont-event {
  width: 432px;
  height: 381px;
  background: url("/images/new/eventbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .close {
    width: 40px;
    height: 40px;
    z-index: 999;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
  .content {
    height: 100%;
    .list {
      height: calc(100% - 80px);
      margin-top: 45px;
      overflow: auto;
      padding: 0 2px;
      .item {
        width: 100%;
        // margin-bottom: 24px;
        padding: 12px 39px;
        .img{
          width: 100%;
          height: 200px;
        }
        &:hover {
          background: url("/images/new/warningbg.png") no-repeat;
          background-size: 100% 100%;
        }
        .inft {
          font-family: YouSheBiaoTiHei;
          font-size: 25px;
          color: #ffffff;
          line-height: 32.5px;
        }
        .infc,
        .infoa {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 29px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
